<template>
  <!-- 表格卡片 -->
  <a-card size="small" :bordered="false" :hoverable="true" :scroll="{ x: 1500 }">
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-button type="primary" @click="showModal"><PlusOutlined />点击添加捐赠记录</a-button>
          </a-col>
          <a-col :span="8"> <a-input v-model:value="queryForm.key" placeholder="关键字查询" /></a-col>
          <a-col :span="3">
            <a-button type="primary" @click="getInitDateFind"><SearchOutlined />查询</a-button></a-col
          >
          <a-col :span="3">
            <a-button @click="getRemase"><ReloadOutlined />重置</a-button></a-col
          >
          <a-col :span="2">
            <a-button @click="getImport"><VerticalAlignBottomOutlined />导出</a-button></a-col
          >
        </a-row>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.OA.ENTERPRISE" :refresh="getInitDate" />
      </div>
    </a-row>
    <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns"
      :row-key="(record) => record.bldonorlistid"
      :pagination="false"
      :loading="tableLoading"
      bordered
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'action'" title="操作">
          <div class="smart-table-operate">
            <a-popconfirm title="是否要删除此条申报?" ok-text="确定" cancel-text="取消" @confirm="confirm(record)">
              <a-button size="small"><DeleteOutlined /> </a-button>
            </a-popconfirm>
          </div>
        </template>
        <template v-if="column.dataIndex === 'blinvoice'" title="是否需要发票">
          <div class="smart-table-operate">
            <span v-if="record.blinvoice == 1">是</span>
            <span v-if="record.blinvoice == 0">否</span>
          </div>
        </template>
      </template>
    </a-table>
    <!-- 分页-->
    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.limit"
        v-model:current="queryForm.page"
        v-model:pageSize="queryForm.limit"
        :total="total"
        @change="getInitDate"
        @showSizeChange="getInitDate"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </a-card>
  <!-- 审核流程 -->
  <a-modal v-model:open="open" title="添加捐赠明细" @ok="handleOk" width="600px">
    <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
      <div style="margin-top: 30px">
        <a-form-item label="捐赠方" name="blname">
          <a-input v-model:value="formState.blname" placeholder="请填写" />
        </a-form-item>
        <a-form-item label="捐赠金额" name="blamount">
<<<<<<< HEAD
          <a-input v-model:value="formState.blamount" placeholder="请填写" />
          <span style="color: red">(单位/元)</span>
        </a-form-item>
        <a-form-item label="捐赠日期" name="bldate">
          <a-date-picker v-model:value="formState.bldate" placeholder="请选择日期" :valueFormat="'YYYY-MM-DD'" @change="changedate" />
=======
          <a-input-number v-model:value="formState.blamount" placeholder="请填写" :min="0" :step="0.01" style="width: 100%" />
          <span style="color: red">(单位/元)</span>
        </a-form-item>
        <a-form-item label="捐赠日期" name="bldate">
          <a-date-picker
            v-model:value="formState.bldate"
            placeholder="请选择日期"
            :valueFormat="'YYYY-MM-DD'"
            @change="changedate"
            style="width: 100%"
          />
>>>>>>> yx
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, onMounted, defineEmits, toRaw } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { Donateonline } from '../../api/Donateonline/Donateonline';
  import { Specialdonations } from '../../api/Specialdonations/Specialdonations';
  import dayjs from 'dayjs';
  //--------------------------- 表格 列 ---------------------------
  const columns = ref([
    {
      title: '知校系统订单',
      dataIndex: 'blext3',
      align: 'center',
    },
    {
      title: '项目名称',
      dataIndex: 'blprojectnum',
      align: 'center',
    },
    {
      title: '捐赠人',
      dataIndex: 'blname',
      align: 'center',
    },
    {
      title: '捐赠金额',
      dataIndex: 'blamount',
      align: 'center',
    },
    {
      title: '是否需要发票',
      dataIndex: 'blinvoice',
      align: 'center',
    },
    {
      title: '捐赠时间',
      dataIndex: 'bldate',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      align: 'center',
      width: 100,
    },
  ]);
  const queryFormState = {
    page: 1,
    limit: PAGE_SIZE,
  };
  const queryForm = reactive({ ...queryFormState });
  const tableLoading = ref(false);
  const tableData = ref([]);
  const total = ref(0);
  const getInitDateFind = () => {
    message.success('查询成功');
    getInitDate();
  };
  // 表格初始化
  async function getInitDate() {
    try {
      let res = await Donateonline.DonateonInite(queryForm);
      console.log(res, '初始化');
      tableData.value = res.page.list;
      total.value = res.page.totalCount;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }

  //新增
  //表单验证规则
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };

  const formState = reactive({ bldate: '' });
  const rules = {
    blname: [
      {
        required: true,
        message: '请填写捐赠方',
        trigger: 'change',
      },
    ],
    blamount: [
      {
        required: true,
        message: '请填写捐赠金额',
        trigger: 'change',
      },
<<<<<<< HEAD
=======
      {
        validator: (rule, value) => {
          if (value == 0) {
            return Promise.reject('请输入正确的捐赠金额');
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
>>>>>>> yx
    ],
    bldate: [
      {
        required: true,
        message: '请填写捐赠日期',
        trigger: 'change',
      },
    ],
  };
  const open = ref(false);
  const showModal = () => {
    open.value = true;
  };
  //确认提交
  const handleOk = (e) => {
    formRef.value
      .validate()
      .then(() => {
        let queryFrom = { ...toRaw(formState) };
        Donateonline.DonateonAdd(queryFrom)
          .then((res) => {
            message.success('添加成功');
            formRef.value.resetFields();
            open.value = false;
            getInitDate();
          })
          .catch((e) => {
            smartSentry.captureError(e);
          });
      })
      .catch((error) => {
        console.log(error);
        message.warning('表单有未填项');
      });
  };
  //删除
  const confirm = async (record) => {
    console.log(record);
    let id = record.bldonorlistid;
    try {
      let list = [id];
      let res = await Donateonline.DonateDelete(list);
      const totalPage = Math.ceil((total.value - 1) / PAGE_SIZE);
      console.log('totalPage:', totalPage);
      const currentPage = queryForm.page > totalPage ? totalPage : queryForm.page;
      queryForm.page = currentPage < 1 ? 1 : currentPage;
      message.success('删除成功');
      getInitDate();
    } catch (error) {
      smartSentry.captureError(error);
    }
  };
  //导出
  const getImport = async () => {
    try {
      let res = await Donateonline.ImportDonte();
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(new Blob([res.data]));
      link.href = url;
      link.download = '在线捐赠信息.xlsx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      message.success(`导出成功！`);
    } catch (error) {
      smartSentry.captureError(error);
    }
  };
  const getRemase = () => {
    queryForm.key = '';
    message.success('重置成功');
    getInitDate();
  };
  onMounted(() => {
    getInitDate();
  });
</script>
